<template>
  <component :is="currentLevelComponent" v-if="currentLevelComponent" />
  <div v-else class="loading">加载中...</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useGameStore } from '@/stores/game'
import { LevelType } from '@/types/game'
import NumberRecognitionLevel from './levels/NumberRecognitionLevel.vue'
import ShapeMatchingLevel from './levels/ShapeMatchingLevel.vue'
import AdditionLevel from './levels/AdditionLevel.vue'

const route = useRoute()
const gameStore = useGameStore()

const levelId = computed(() => parseInt(route.params.id as string))
const levelData = computed(() => gameStore.levels.find(l => l.id === levelId.value))

const currentLevelComponent = computed(() => {
  if (!levelData.value) return null

  const componentMap = {
    [LevelType.NUMBER_RECOGNITION]: NumberRecognitionLevel,
    [LevelType.SHAPE_MATCHING]: ShapeMatchingLevel,
    [LevelType.COMPARE_SIZE]: NumberRecognitionLevel, // 暂时使用数字识别
    [LevelType.ADDITION]: AdditionLevel,
    [LevelType.SUBTRACTION]: AdditionLevel, // 暂时使用加法关卡
    [LevelType.PATTERN]: NumberRecognitionLevel, // 暂时使用数字识别
    [LevelType.LOGIC]: NumberRecognitionLevel, // 暂时使用数字识别
    [LevelType.TIME]: NumberRecognitionLevel, // 暂时使用数字识别
    [LevelType.MONEY]: NumberRecognitionLevel // 暂时使用数字识别
  }

  return componentMap[levelData.value.type] || null
})
</script>

<style scoped>
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 32px;
  color: #666;
}
</style>
